<script setup lang="ts">
defineOptions({
  name: 'DocumentView'
});
import { ArrowRight } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router';
import { getNews } from '@/api/news';
import { getPolicies } from '@/api/policies';
import { getPolicy } from '@/api/policy';
import type { Document } from '@/types/document'
const detail = ref<Document>({});
const route = useRoute()
onMounted(() => {
  getDetail()
})

function getDetail() {
  let apiUrl = (id: string) => ({})
  switch (route.params.type) {
    case "1":
      apiUrl = getNews
      break;
    case "2":
      apiUrl = getPolicy
      break;
    case "3":
      apiUrl = getPolicies
      break;
  }
  apiUrl(route.params.id).then(res => {
    detail.value = res.data
  })
}
</script>
<template>
  <div>
    <div class="w-1200 m-auto">
      <div class="pt-7 pb-5.25">
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-if="route.params.type == '1'" :to="{ path: '/document/news' }">新闻资讯</el-breadcrumb-item>
          <el-breadcrumb-item v-if="route.params.type == '2'"
            :to="{ path: '/document/policy' }">政策法规</el-breadcrumb-item>
          <el-breadcrumb-item v-if="route.params.type == '3'"
            :to="{ path: '/document/supporting-policies' }">惠企政策</el-breadcrumb-item>
          <el-breadcrumb-item>文章详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="c-detail">
        <div class="c-detail-top">
          <h2 class="text-6 col6 text-center">{{ detail.title }}</h2>
          <div class="col9 text-3.25 mt-3.75">
            <span class="mr-10.7">时间：{{ detail.createTime }}</span>
            <span class="mr-10.7" v-if="!!detail.source">来源：{{ detail.source }}</span>
            <span>阅读量：{{ detail.viewCount }}</span>
          </div>
        </div>

        <div class="c-text">
          <div v-html="detail.content">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.c-detail {
  width: 100%;
  margin: 0 auto;
  min-height: 600px;
  background: #fff;
  -webkit-box-shadow: 0 0 8px 0 rgba(57, 120, 203, .1);
  box-shadow: 0 0 8px 0 rgba(57, 120, 203, .1);

  .c-detail-top {
    padding: 29px 77px 13px;
    border-bottom: 1px solid #d4dcf0;
    cursor: default;
  }

  .c-text {
    font-size: 16px;
    color: #666;
    line-height: 36px;
    padding: 29px 71px;
    margin-bottom: 29px;
    cursor: default;
    vertical-align: middle;
    overflow-y: auto;
    overflow-x: hidden;
  }
}
</style>
